<template>
  <BasicModal title="查看" @register="registerModal" destroyOnClose 
              :showCancelBtn="false" :showOkBtn="false" :canFullscreen="false" :centered="true"
              :width="655" 
  >
    <a-row type="flex" :gutter="5" style="margin: 0; padding: 0">
      <a-col flex="320px" style="border: 1px #ddd solid;">
        <a-form ref="registerForm" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
          <a-form-item label="部门">
            {{ dictSeal.ddlx }}
          </a-form-item>
          <a-form-item label="公司">
            {{ dictSeal.company }}
          </a-form-item>
          <a-form-item label="类型">
            {{ dictSeal.type }}
          </a-form-item>
          <a-form-item label="方式">
            {{ dictSeal.mode }}
          </a-form-item>
          <a-form-item label="用章人" >
            {{ model.useName }}
          </a-form-item>
          <a-form-item label="日期" >
            {{ model.useDate }}
          </a-form-item>
          <a-form-item label="用途" >
            {{ model.content }}
          </a-form-item>
        </a-form>
      </a-col>
      <a-col flex="300px" style="border: 1px #ddd solid; padding-top: 10px; padding-left: 10px; margin-left: 5px">
        <Timeline>
          <TimelineItem :color="model.current == '1' ? 'green' : 'gray'">
            <text><a-tag :color="model.current == '1' ? 'green' : 'default'">新增</a-tag></text>
            <text :class="model.current == '1' ? 'current' : ''">{{model.createName}}</text>
            <text :class="model.current == '1' ? 'current' : ''" class="ml-2">{{model.createDate}}</text>
          </TimelineItem>
          <TimelineItem :color="model.current == '2' ? 'green' : 'gray'">
            <text><a-tag :color="model.current == '2' ? 'green' : 'default'">{{model.stat == '21' ? "取消" : "经理"}}</a-tag></text>
            <text :class="model.current == '2' ? 'current' : ''">{{model.auditName}}</text>
            <text :class="model.current == '2' ? 'current' : ''" class="ml-2">{{model.auditDate}}</text>
          </TimelineItem>
          <view v-if="model.stat == '41'">
          <TimelineItem :color="model.current == '3' ? 'green' : 'gray'">
            <text><a-tag :color="model.current == '3' ? 'green' : 'default'">回退</a-tag></text>
            <text :class="model.current == '3' ? 'current' : ''">{{model.backName}}</text>
            <text :class="model.current == '3' ? 'current' : ''" class="ml-2">{{model.backDate}}</text>
          </TimelineItem>
          </view>
          <view v-else>
          <TimelineItem :color="model.current == '4' ? 'green' : 'gray'">
            <text><a-tag :color="model.current == '4' ? 'green' : 'default'">{{model.mode == '1' ? "盖章" : "还章"}}</a-tag></text>
            <text :class="model.current == '4' ? 'current' : ''">{{model.backName}}</text>
            <text :class="model.current == '4' ? 'current' : ''" class="ml-2">{{model.backDate}}</text>
          </TimelineItem>
          </view>
          <TimelineItem :color="model.current == '4' ? 'orange' : 'gray'">
            <text><a-tag :color="model.current == '4' ? 'orange' : 'default'">完成</a-tag></text>
          </TimelineItem>
        </Timeline>
      </a-col>
    </a-row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from '../Seal.data';
  import { queryById } from '../Seal.api';
  import { render } from '/@/utils/common/renderUtils';
  import { Timeline } from 'ant-design-vue';
  import { TimelineItem } from 'ant-design-vue';
  import dayjs from "dayjs";

  const isUpdate = ref(true);
  //表单配置
  const [registerForm] = useForm({
    labelWidth: 90,
    schemas: formSchema,
    showActionButtonGroup: false,
  });

  let model = reactive<any>({});
  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    //setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    isUpdate.value = !!data?.isUpdate;
    queryById({id: data.id}).then((res)=>{
      Object.assign(model, res.result);
    })
  });

  const dictSeal = computed(() => {
    const opt = {
      ddlx: render.renderDict(model.ddlx, 'ddlxType')?.children,
      company: render.renderDict(model.companyId, 'companys')?.children,
      type: render.renderDict(model.type, 'sealType')?.children,
      mode: render.renderDict(model.mode, 'sealMode')?.children
    };
    return opt
  });

</script>

<style lang="less" scoped>
  .current {
    color:#389E0D;
    font-size: 14px;
    font-weight: 600;
  }
</style>
